<template>
    <div class="resource">
        <!-- search -->
        <div class="search">
            <!-- <input type="text" @focus="inputFocus" @blur="inputBlur" v-model="searchInput" class="searchInput" /> -->
            <div @click="inputFocus" class="searchInput"></div>
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <div class="check-title" @click="handleMskShow">
            <span class="check-text">{{checkValue}}</span>
            <span class="check-icon iconfont">&#xe615;</span>
        </div>
        <!-- 显示所有 -->
        <scroll class="resource-wrapper" :dataObj="resourceList" v-show="!checkFlag">
            <div v-show="resourceList.meishu">
                <ul class="resource-main">
                    <li v-for="(item,index) in resourceList" class="resource-item">
                        <h5 class="resource-item-title">{{item.name}}</h5>
                        <ul v-show="item.list != null">
                            <router-link :to="'/detailType/' + list.id" v-for="(list,index) in item.list" :key="index" class="resource-list" tag="li">
                                <div class="left">
                                    <img class="resource-list-img" v-lazy="list.coverimg" alt="" />
                                </div>
                                <div class="right">
                                    <h6 class="resource-list-title">{{list.title}}</h6>
                                    <span class="resource-list-date">{{list.pubdate}}</span>
                                    <p class="resource-list-desc">{{list.content.substr(0,36)}}...</p>
                                </div>
                            </router-link>
                        </ul>
                        <ul v-show="item.list === null">
                            <li class="resource-list">
                                <span class="text">暂无任何数据</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!resourceList.meishu">
                <loading></loading>
            </div>
        </scroll>
        <!-- 按选择加载 -->
        <scroll class="resource-wrapper" :dataObj="resourceCheck" v-show="checkFlag">
            <div>
                <div class="resource-main">
                    <div class="resource-item">
                        <h5 class="resource-item-title">{{resourceCheck.name}}</h5>
                        <ul>
                            <router-link :to="'/detailType/' + list.id" tag="li" v-for="(list,index) in resourceCheck.list" :key="list.id" class="resource-list">
                                <div class="left">
                                    <img class="resource-list-img" :src="list.coverimg" alt="" />
                                </div>
                                <div class="right">
                                    <h6 class="resource-list-title">{{list.title}}</h6>
                                    <span class="resource-list-date">{{list.pubdate}}</span>
                                    <p class="resource-list-desc">{{list.content.substr(0,36)}}...</p>
                                </div>
                            </router-link>
                        </ul>
                    </div>
                </div>
            </div>
        </scroll>
        <!-- 底部 -->
        <div class="resource-fixed">
            <router-link to="/anime" class="resource-fixed-item" replace>
                <i class="icon icon-item1"></i>
                <span class="desc">动漫馆</span>
            </router-link>
            <router-link to="/gallery" class="resource-fixed-item" replace>
                <i class="icon icon-item2"></i>
                <span class="desc">数字展馆</span>
            </router-link>
            <router-link to="/resource" class="resource-fixed-item active" replace>
                <i class="icon icon-item3"></i>
                <span class="desc">数字资源库</span>
            </router-link>
        </div>
        <van-actionsheet v-model="mskShow" :actions="actions" cancel-text="取消" />
        <search ref="searchFlag" :total="total"></search>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import Search from 'pages/resource/components/search/search'

    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                title: "数字资源库",
                mskShow: false,
                checkValue: '全部',
                resourceList: {},
                resourceCheck: {},
                resourceArr: [],
                checkFlag: false,
                num: 1,
                size: 10,
                total: 0,
                actions: [
                    {
                        name: '全部',
                        callback: this.handleClick
                    },
                    {
                        name: '音乐',
                        callback: this.handleClick
                    },
                    {
                        name: '舞蹈',
                        callback: this.handleClick
                    },
                    {
                        name: '戏剧',
                        callback: this.handleClick
                    },
                    {
                        name: '美术',
                        callback: this.handleClick
                    },
                    {
                        name: '书法',
                        callback: this.handleClick
                    },
                    {
                        name: '摄影',
                        callback: this.handleClick
                    },
                    {
                        name: '文学',
                        callback: this.handleClick
                    }
                ]
            }
        },
        methods: {
            // 获取焦点
            inputFocus () {
                // this.searchShow = false
                this.$refs.searchFlag.show()
            },
            // 失去焦点
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            handleMskShow () {
                this.mskShow = !this.mskShow
            },
            handleClick (item) {
                this.selectVal(item.name)
            },
            // 按需请求
            selectVal (picker, values) {
                this.mskShow = false
                this.checkValue = picker
                this.checkFlag = true
                // 按需加载
                if(this.checkValue === "音乐") {
                    this.resourceCheck = this.resourceList.yinyue
                }
                if(this.checkValue === "舞蹈") {
                    this.resourceCheck = this.resourceList.wudao
                }
                if(this.checkValue === "戏剧") {
                    this.resourceCheck = this.resourceList.xiju
                }
                if(this.checkValue === "美术") {
                    this.resourceCheck = this.resourceList.meishu
                }
                if(this.checkValue === "书法") {
                    this.resourceCheck = this.resourceList.shufa
                }
                if(this.checkValue === "摄影") {
                    this.resourceCheck = this.resourceList.sheying
                }
                if(this.checkValue === "文学") {
                    this.resourceCheck = this.resourceList.wenxue
                }
                if(this.checkValue === "全部") {
                    this.getResourceList()
                }
            },
            // 请求全部
            getResourceList () {
                this.checkFlag = false
                axios.get('/api/index.php?g=Api&m=Guanwang&a=allshuziziyuan').then((res) => {
                    this.resourceList = res.data
                    // console.log(this.resourceList)
                })
            },
            // 请求数据
            getResourceListTotal () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=shuziziyuan&page='+this.num+'&size=' + this.size+'').then((res) => {
                    this.total = Number(res.data.total)
                })
            }
        },
        components: {mTitle,Scroll,Loading,Search},
        created () {
            this.getResourceList()
            this.getResourceListTotal()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .resource
        width: 100%
        height: 100%
        overflow: hidden
        position: relative
        background: #fff
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .check-title
            position: absolute
            top: 58px
            right: 15px
            color: #fff
        .resource-wrapper
            position: absolute
            width: 100%
            overflow: hidden
            top: 86px
            bottom: 54px
            width: 100%
            .loading-wrapper
                position: absolute
                top: 50%
                transform: translateY(-50%)
                width: 100%
            .resource-main
                padding: 0 15px
                width: 100%
                box-sizing: border-box
                .resource-item
                    width: 100%
                    .resource-item-title
                        height: 30px
                        line-height: 30px
                        font-size: 18px
                        font-weight: 700
                    ul
                        .resource-list
                            width: 100%
                            // height: 110px
                            padding-bottom: 10px
                            display: flex
                            border-bottom: 1px solid #eee
                            padding-top: 10px
                            box-sizing: border-box
                            overflow: hidden
                            align-items: center
                            .text
                                color: #888
                            .left
                                flex: 0 0 125px
                                width: 125px
                                height: 95px
                                .resource-list-img
                                    width: 100%
                                    height: 100%
                            .right
                                flex: 1
                                margin-left: 20px
                                width: 100%
                                overflow: hidden
                                .resource-list-title
                                    font-size: 14px
                                    font-weight: 700
                                    ellipsis()
                                .resource-list-date
                                    font-size: 10px
                                    color: #888
                                    display: block
                                    margin-top: 4px
                                .resource-list-desc
                                    font-size: 12px
                                    color: #888
                                    margin-top: 4px
                                    line-height: 140%
        .resource-fixed
            position: fixed
            bottom: 0
            height: 54px
            left: 0
            width: 100%
            background: #fff
            box-sizing: border-box
            padding: 0 15px
            display: flex
            align-items: center
            border-top: 1px solid rgba(7,17,27,.1)
            .resource-fixed-item
                flex: 1
                overflow: hidden
                &.active
                    .icon-item1
                        background: url('./anime-icon1-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item2
                        background: url('./anime-icon2-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item3
                        background: url('./anime-icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                .icon-item1
                    background: url('./anime-icon1.png') no-repeat
                    width: 21px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item2
                    background: url('./anime-icon2.png') no-repeat
                    width: 18px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item3
                    background: url('./anime-icon3.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
</style>